<template>
    <div>
        <el-container>
            <el-main>
                <el-row type="flex" class="row-bg">
                    <el-col :span="6"><div class="grid-content bg-purple bg-color">用户账号</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple bg-color">用户昵称</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple bg-color">会员等级</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple bg-color">成长值</div></el-col>
                </el-row>
                <el-row type="flex" class="row-bg">
                    <el-col :span="6"><div class="grid-content bg-purple bg-color02" v-text="test.userNumber"></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple bg-color02" v-text="test.userName"></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple bg-color02" v-text="test.userMsId"></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple bg-color02" v-text="test.userGrowth"></div></el-col>
                </el-row>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        <div><i class="el-icon-search"></i> 筛选查询</div>
                        <div>
                            <el-button @click.native="selectResults">查询结果</el-button>
                        </div>
                    </el-header>
                    <el-main class="info-main">
                        <el-form ref="form" :model="form" label-width="100px">
                            <el-form-item class="select-div" label="成长值来源：">
                         <el-input placeholder="" class="input-width2" v-model="form.growthSource"></el-input>
                            </el-form-item>
                            <el-form-item class="select-div" label="操作时间：">
                                <el-date-picker
                                        v-model="form.growthCreateTime"
                                        type="date"
                                        placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-form>
                    </el-main>
                </el-container>
            </el-main>

            <el-footer>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        <div><i class="el-icon-s-fold"></i>数据列表</div>
                        <div>
                            <el-button @click="exportOrder">导出数据</el-button>
                           
                            <el-select v-model="sort" class="input-width2" placeholder="排列方式">
                             <el-option label="成长值来源" value="0"></el-option>
                             <el-option label="时间" value="1"></el-option>       
                            </el-select>
                        </div>
                    </el-header>
                    <el-main class="info-main padding-style">
                        <el-table ref="multipleTable" @selection-change="handleSelectionChange" :data="tableData" border style="width: 100%">
                            <el-table-column prop="growthSource" label="成长值来源" width="150"></el-table-column>
                            <el-table-column prop="growthChange" label="成长值变化" width="160"></el-table-column>
                            <el-table-column prop="growthCreateTime" label="时间"> </el-table-column>
                            <el-table-column prop="growthRemark" label="备注"> </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer class="info-foot">
                        <div class="paging-style">
                             <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
                        </div>
                    </el-footer>
                </el-container>
            </el-footer>
        </el-container>

    </div>
</template>

<script>
import growupApi from "@/api/user/growp";
import userApi from "@/api/user/list";
    export default {
        data() {
            return {
                form:{
                   growthSource:null,
                   growthCreateTime:null,
                },
                test:{},
            
              
                multipleSelection: [],
                moreOperation:"",
             
              
             // 分页相关
                pageSize: 2,
                 pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
                 total: 5,
                 currentPage1: 1,
                sort: '',
                      // 开启筛选模式
      selectrue:false,
                tableData: [],
            }
        },
         // 监听有数据改变执行方法
  watch: {
    sort(val, newval) {
      console.log(val);
      console.log(newval);
      if(newval==1){
   growupApi.getListByOder(this.currentPage1, this.pageSize,this.$route.query.userId,0).then(response=>{
    console.log(response);
   this.tableData = response.data.data.list;
        this.total = response.data.data.total;

})
      };
      if(newval==0){
              growupApi.getListByTime(this.currentPage1, this.pageSize,this.$route.query.userId,0).then(response=>{
    console.log(response);
   this.tableData = response.data.data.list;
        this.total = response.data.data.total;

}) 
      };
    }
    },
        methods:{
            selectResults(){
                alert("执行查询结果");
                console.log(this.form);
                // 根据结果筛选数据
 var  growthSource=this.form.growthSource;
 var growthCreateTime=this.form.growthCreateTime;
 var growthUserId = parseInt(this.$route.query.userId);
   if(growthSource!=null||growthCreateTime!=null){
        this.selectrue=true;
      }else{
        this.selectrue=false;
      };
      console.log("筛选模式:"+this.selectrue);
      this.intDataThree(this.currentPage1, this.pageSize,growthUserId,growthSource,growthCreateTime)
           
            },
            exportOrder(){
                alert("执行导出数据")
            },
          
            confirm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert("执行确定...");
                    } else {
                        return false;
                    }
                });
            },
              handleSizeChange(val) {
             this.pageSize = val;
      console.log("得到" + this.pageSize);
      if(this.selectrue==true){
           var  growthSource=this.form.growthSource;
 var growthCreateTime=this.form.growthCreateTime;
 var growthUserId = parseInt(this.$route.query.userId);
 this.intDataThree(this.currentPage1, this.pageSize,growthUserId,growthSource,growthCreateTime)

      }else{

 if(this.sort==null){this.intData(this.currentPage1, this.pageSize,this.$route.query.userId);};
      if(this.sort==0){
          growupApi.getListByOder(this.currentPage1, this.pageSize,this.$route.query.userId,0).then(response=>{
    console.log(response);
   this.tableData = response.data.data.list;
        this.total = response.data.data.total;

})
      };
   
      if(this.sort==1){
          growupApi.getListByTime(this.currentPage1, this.pageSize,this.$route.query.userId,0).then(response=>{
    console.log(response);
   this.tableData = response.data.data.list;
        this.total = response.data.data.total;

})
      }
      }
    
            },
            handleCurrentChange(val) {
                this.currentPage1 = val;
       if(this.selectrue==true){
           var  growthSource=this.form.growthSource;
 var growthCreateTime=this.form.growthCreateTime;
 var growthUserId = parseInt(this.$route.query.userId);
 this.intDataThree(this.currentPage1, this.pageSize,growthUserId,growthSource,growthCreateTime)

      }else{

 if(this.sort==null){this.intData(this.currentPage1, this.pageSize,this.$route.query.userId);};
      if(this.sort==0){
          growupApi.getListByOder(this.currentPage1, this.pageSize,this.$route.query.userId,0).then(response=>{
    console.log(response);
   this.tableData = response.data.data.list;
        this.total = response.data.data.total;

})
      };
   
      if(this.sort==1){
          growupApi.getListByTime(this.currentPage1, this.pageSize,this.$route.query.userId,0).then(response=>{
    console.log(response);
   this.tableData = response.data.data.list;
        this.total = response.data.data.total;

})
      }
      }
      },
            // 
            intData(pageNum, pageSize, growthUserId){
growupApi.getListByUserIdPage(pageNum, pageSize, growthUserId).then(response=>{
    console.log(response);
   this.tableData = response.data.data.list;
        this.total = response.data.data.total;

})
            },

              intDataTwo(userId){
         userApi.getListById(userId).then(response => {
        console.log(response);
     
            this.test = response.data.data;
          
      });
      },
      intDataThree(pageNum, pageSize, growthUserId, growthSource, growthCreateTime){
          growupApi.getListByUserIdPageSelect(pageNum, pageSize, growthUserId, growthSource, growthCreateTime).then(response=>{
    console.log(response);
   this.tableData = response.data.data.list;
        this.total = response.data.data.total;

})
      }
        },
        mounted(){
 var userId = parseInt(this.$route.query.userId);
            console.log(userId);

            this.intDataTwo(userId);
this.intData(this.currentPage1, this.pageSize,userId);
        }
    }
</script>

<style scoped>
    .badges {
        height: 60px;
        padding: 10px;
    }
    .common-home,.content-header{
        border-bottom:1px solid #E4E4E4;
        position: relative;
    }
    .common-home>div{
        display: inline-block;
        width:100px;
        height:50px;
        vertical-align: top;
        text-align: center;
        line-height: 50px;
        color:#666666;
    }
    .common-home>.refresh{
        position: absolute;
        right:10px;
    }
    .common-home>div>span{
        border:4px solid #0399FE;
        display: inline-block;
        width: 0px;
        height: 15px;
        vertical-align: middle;
        margin-right: 5px;
        background-color: #0399FE;
    }
    .parent-body{
        border:1px solid #E4E4E4;
    }
    .content-header{
        height:50px;
        line-height: 50px;
        background-color:#F3F3F3;
        color:#666666;
        position: relative;
        text-align: left;
    }
    .info-main{
        background-color:#fff;
    }

    .content-header>div{
        display: inline-block;
    }
    .content-header>div:last-of-type{
        position: absolute;
        right:10px;
    }
    .input-width{
        width:200px;
    }
    .select-div{
        display: inline-block;
        width:300px;
    }
    .input-width2{
        width:120px;
    }
    .input-width3{
        width:400px;
    }
    .padding-style{
        padding:0 !important;
    }

    .info-foot{
        background-color:#FDFDFE;
        height:60px;
        line-height: 60px;
        position: relative;
    }
    .paging-style{
        position: absolute;
        right:10px;
        display: inline-block;
        top:15px;
    }
    .margin-left{
        margin-left:10px;
    }
    .bg-color{
         background-color:#F9FAFC;
         border:1px solid #E4E4E4;
        height:40px;
        text-align: center;
        line-height: 40px;
        font-weight: bolder;
        color:rgb(102, 102, 102);
     }
    .bg-color02{
        background-color:#fff;
        border:1px solid #E4E4E4;
        height:50px;
        text-align: center;
        line-height: 50px;
        margin-bottom:20px;
        color:rgb(102, 102, 102);
    }
    .el-row{
        margin-bottom:0 !important;
    }
    .el-col{
        height:auto !important;
    }
</style>

